<template>
	<div>
		<el-card shadow="never" class="statistics">
			<div class="tit">财务结算</div>
			<div class="time">数据统计截止时间: 当前</div>
		</el-card>

		<el-row class="sel-form">
			<el-col :span="20">
				<el-date-picker
						v-model="form.year"
						type="year"
						format="yyyy年"
						value-format="yyyy"
						placeholder="选择年">
				</el-date-picker>
				<el-date-picker
						v-model="form.month"
						type="month"
						format="MM月"
						value-format="M"
						placeholder="选择月">
				</el-date-picker>
				<el-select v-model="form.center" clearable placeholder="全部中心">
					<el-option
							v-for="item in merchs"
							:key="item.id"
							:label="item.name"
							:value="item.id">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="4" style="display: flex;justify-content: flex-end">
				<el-button type="primary" @click="searchData">查询</el-button>
			</el-col>
		</el-row>
		<div class="sel-tit">查询数据</div>
		<el-row :gutter="20" class="sel-content">
			<el-col :span="8" v-for="(item, index) in status" :key="index">
				<div :class="['going',{unfinished: index === 0},{finished: index === 1},{done: index === 2}, {active: index===active}]" @click="selStatus(index)">
					<div class="status">{{ item }}</div>
					<div class="price" v-if="index===0">
						<span>{{ settlement.status0_count }}场</span>
						<span>{{ sum.status0_sum }}元</span>
					</div>
					<div class="price" v-if="index===1">
						<span>{{ settlement.status1_count }}场</span>
						<span>{{ sum.status1_sum }}元</span>
					</div>
					<div class="price" v-if="index===2">
						<span>{{ settlement.status2_count }}场</span>
						<span>{{ sum.status2_sum }}元</span>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="sel-tit">活动列表</div>
		<el-table
				v-loading="loading"
				:data="tableData"
				:header-cell-style="{background:'#f2f2f2',color:'#555',textAlign: 'center'}"
				border
				class="active-list"
				style="width: 100%">
			<el-table-column
					prop="date"
					label="活动名称">
				<template slot-scope="scope">
					<div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{ scope.row.title }}</div>
					<div style="color: #b2b2b2">{{ scope.row.store_name }}</div>
				</template>
			</el-table-column>
			<el-table-column
					label="活动状态/涉及金额">
				<template slot-scope="scope">
					<div style="color: #f04141;text-align: center" v-if="scope.row.settlement_status === 0"><span style="font-size: 22px">{{scope.row.orders.sum}}</span><br>未完结</div>
					<div style="color: #f89f28;text-align: center" v-if="scope.row.settlement_status === 1"><span style="font-size: 22px">{{scope.row.orders.sum}}</span><br>已完结（待结算）</div>
					<div style="color: #16a611;text-align: center" v-if="scope.row.settlement_status === 2"><span style="font-size: 22px">{{scope.row.orders.sum}}</span><br>已结算</div>
				</template>
			</el-table-column>
			<el-table-column
					label="报名人数">
				<template slot-scope="scope">
					<div style="">{{ scope.row.sales }}/{{ scope.row.total }}</div>
				</template>
			</el-table-column>
			<el-table-column
					label="完成度"
					width="130">
				<template slot-scope="scope">
					<el-progress :text-inside="true" type="line" :stroke-width="16" :percentage="scope.row.orders.progress*100" color="#2f3ec3"></el-progress>
				</template>
			</el-table-column>
			<el-table-column
					label="具体数据">
				<template slot-scope="scope">
					<div>待核销{{ scope.row.orders.status2 }}</div>
					<div>退申{{ scope.row.orders.status_refund }}</div>
					<div>等位{{ scope.row.orders.status1 }}</div>
					<div>完成{{ scope.row.orders.status3 }}</div>
				</template>
			</el-table-column>
			<el-table-column
					label="操作">
				<template slot-scope="scope">
					<el-button type="primary" disabled size="small" v-if="scope.row.settlement_status === 0">无法结算</el-button>
					<el-popconfirm title="确定结算吗？" @onConfirm="confirmSettlement(scope.row)" v-if="scope.row.settlement_status === 1">
						<el-button slot="reference" type="primary" size="small">点击结算</el-button>
					</el-popconfirm>
					<div style="color: #16a611;font-size: 20px" v-if="scope.row.settlement_status === 2">已结算</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="pageSizes"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount">
		</el-pagination>
	</div>
</template>
<script>
	import {activeCenter, settlementList, activeSettlement} from '../api/goodsAPI'

	export default {
		data() {
			return {
				totalCount: 0, // 总共多少条
				pageSize: 5, // 每页显示条目个数
				pageSizes: [5, 10, 15, 20], // 每页显示个数选择器的选项设置
				currentPage: 1, // 当前页数
				loading: true,
				form: {
					year: new Date(),
					month: new Date(),
					center: ''
				},
				merchs: [], // 商户列表
				tableData: [],
				status: ['未完结', '已完结（待结算）', '已结算'],
				active: 0,
				settlement_status: 0, // 结算状态(0-未完结 1-已完结 2-已结算)
				settlement: {},
				sum: {},
				visible: false,
			}
		},
		created() {
			this._activeCenter() // 获取门店列表
			this._settlementList() // 活动结算列表
		},
		methods: {
			searchData() {
				this.currentPage = 1
				this.loading = true
				this._settlementList()
			},
			_settlementList() {
				let time = this.form.year + ''
				let timeMonth = this.form.month + ''
				let year,month
				if (time.length > 10) {
					if (time.includes('中国标准时间')) {
						let time2 = new Date(time).getTime()
						let time3 = this.msToDate(time2).withoutTime
						year = time3.split('-')[0]
						console.log(year)
					}
				} else {
					year = this.form.year
				}
				if (timeMonth.length > 10) {
					if (timeMonth.includes('中国标准时间')) {
						let time2 = new Date(time).getTime()
						let time3 = this.msToDate(time2).withoutTime
						month = time3.split('-')[1]
						console.log(month)
					}
				} else {
					month = this.form.month
				}
				let data = {
					p: this.currentPage,
					length: this.pageSize,
					// year: this.form.year ? this.form.year-0 : '',
					year: year ? year-0 : '',
					// month: this.form.month ? this.form.month-0 : '',
					month: month ? month-0 : '',
					store_id: this.form.center,
					settlement_status: this.settlement_status
				}
				console.log(data)
				settlementList(data).then(res =>{
					console.log(res)
					this.tableData = res.data.list
					this.totalCount = res.data.count
					this.settlement = res.data.settlement
					this.sum = res.data.sum
					this.loading = false
				}).catch(err => {
					this.loading = false
					this.$message({
						message: err.response.data.message || '服务器内部错误',
						type: 'error'
					})
				})
			},
			_activeCenter() {
				activeCenter({length: 1000,status: 1}).then(res =>{
					// console.log(res)
					this.merchs = res.data.store
				}).catch(err => {
					this.$message({
						message: err.response.data.message || '服务器内部错误',
						type: 'error'
					})
				})
			},
			selStatus(index) {
				// this.active = index
				if (index !== this.settlement_status) {
					this.active = this.settlement_status = index
					console.log(index)
					this.currentPage = 1
					this.loading = true
					this._settlementList()
				}
			},
			// 分页的
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
				// 改变每页显示的条数
				this.pageSize = val
				this.loading = true
				this._settlementList()
				// 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1
			},
			// 分页的
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
				this.currentPage = val
				this.loading = true
				this._settlementList()
			},
			confirmSettlement(row) {
				console.log(row)
				activeSettlement({id: row.id}).then(res =>{
					console.log(res)
					this.loading = true
					this._settlementList()
					this.$message({message: '结算成功',type: 'success'})
				}).catch(err => {
					this.$message({
						message: err.response.data.message || '服务器内部错误',
						type: 'error'
					})
				})
			},
			msToDate (msec) {
				let datetime = new Date(msec);
				let year = datetime.getFullYear();
				let month = datetime.getMonth();
				let date = datetime.getDate();
				let hour = datetime.getHours();
				let minute = datetime.getMinutes();
				let second = datetime.getSeconds();

				let result1 = year +
						'-' +
						((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
						'-' +
						((date + 1) < 10 ? '0' + date : date) +
						' ' +
						((hour + 1) < 10 ? '0' + hour : hour) +
						':' +
						((minute + 1) < 10 ? '0' + minute : minute) +
						':' +
						((second + 1) < 10 ? '0' + second : second);

				let result2 = year +
						'-' +
						((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
						'-' +
						((date + 1) < 10 ? '0' + date : date);

				return {
					hasTime: result1,
					withoutTime: result2
				};
			}
		}
	}
</script>
<style scoped lang="scss">
	.sel-form {
		margin-top: 10px;
		background-color: #f2f2f2;
		padding: 10px;
		border-radius: 4px;
	}
	.sel-tit {
		padding: 20px 0;
	}
	.sel-content {
		display: flex;
		justify-content: center;
		.el-col {
			height: 100px;
			.going {
				background-color: #f2f2f2;
				border-radius: 4px;
				padding: 15px;
				font-size: 18px;
				border: 2px solid transparent;
				cursor: pointer;
				.price {
					padding-top: 10px;
					span {
						display: inline-block;
						width: 48%;
						font-size: 22px;
					}
				}
			}
			.active {
				border: 2px solid #2f3ec3;
			}
			.unfinished {
				.status {
					color: #f04141;
					font-weight: 800;
				}
			}
			.finished {
				.status {
					color: #f89f28;
					font-weight: 800;
				}
			}
			.done {
				.status {
					color: #16a611;
					font-weight: 800;
				}
			}
		}

	}
	.el-pagination {
		text-align: center;
		padding: 20px;
	}
	.name-start {
		display: flex;
		align-items: flex-start;
	}
</style>
